<template>
  <div class="my-card">
    <profile-header-user-cover :user="user" />
    <div class="profile-header-wrapper">
      <div class="profile-header-main">
        <profile-header-avatar :user="user" mask-hidden @updatedAvatar="resetAvatar" />
        <div class="profile-header-content">
          <div class="profile-header-content-head">
            <h1 class="profile-header-title flex align-items-start">
              <span class="profile-header-name">{{ user.nickname }}</span>
              <div class="flex flex-wrap align-items-end">
                <span v-if="genderIcon.icon" class="ll-icon m-l-10">
                  <svg-icon
                    :icon-name="genderIcon.icon"
                    class="s16"
                    :style="`color: ${genderIcon.color};`"
                  />
                  &nbsp;{{ genderIcon.label }}
                </span>
                <span v-if="user.living" class="ll-icon m-l-10">
                  <svg-icon icon-name="location" class="s16" style="color: #e6a23c;" />
                  &nbsp;{{ user.living }}
                </span>
                <span
                  v-for="tag in user.tags"
                  :key="tag"
                  class="ll-icon ll-icon--blue m-l-10"
                >{{ tag }}</span>
              </div>
            </h1>
          </div>
          <div
            ref="content-box"
            class="profile-header-content-body"
            :style="`height: ${profileExpand ? '126px' : '51px'};`"
          >
            <template v-if="user.bio">
              <transition name="el-fade-in-linear">
                <div class="profile-header-info" v-show="!profileExpand">
                  <info-item v-if="user.vocation" icon="company" :label="user.vocation" />
                  <info-item v-if="user.company" icon="company2" :label="user.company" />
                </div>
              </transition>
              <transition name="el-fade-in-linear">
                <div ref="detail-box" class="profile-header-detail" v-show="profileExpand">
                  <detail-item v-if="user.vocation" label="职业/所在行业" :val="user.vocation" />
                  <detail-item v-if="user.company" label="所在学校/单位" :val="user.company" />
                  <detail-item v-if="user.bio" label="个人简介" :val="user.bio" />
                </div>
              </transition>
            </template>
            <template v-else>
              <info-item v-if="user.vocation" icon="company" :label="user.vocation" />
              <info-item v-if="user.company" icon="company2" :label="user.company" />
            </template>
          </div>
          <div class="profile-header-content-footer">
            <profile-header-expand-button v-if="user.bio" v-model="profileExpand" />
            <div class="profile-header-buttons" style="bottom: -1px;">
              <button
                v-if="user.id === curUser.id"
                class="button button--blue"
                @click="$router.push('/users/edit')"
              >编辑个人资料</button>
              <follow-button v-else :user="user" @attention="handleAttention" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import ProfileHeaderAvatar from '@/views/users/show/components/profile-header-avatar';
import ProfileHeaderExpandButton from '@/views/users/show/components/profile-header-expand-button';
import InfoItem from '@/views/users/show/components/component-expand-user-info-item';
import DetailItem from '@/views/users/show/components/component-expand-user-detail-item';
import FollowButton from '@/views/users/show/components/follow-button';
import ProfileHeaderUserCover from '@/views/users/show/components/profile-header-user-cover';

export default {
  name: 'profile-header',
  components: {
    ProfileHeaderAvatar,
    ProfileHeaderExpandButton,
    InfoItem,
    DetailItem,
    FollowButton,
    ProfileHeaderUserCover,
  },
  data() {
    return {
      profileExpand: false,
    };
  },
  computed: {
    ...mapState({
      user: 'showingUser',
      curUser: 'currentUser',
    }),
    genderIcon() {
      switch (this.user.gender) {
        case 'male': return { icon: 'male', color: '#0084ff', label: '男' };
        case 'female': return { icon: 'female', color: '#F56C6C', label: '女' };
        default: return { label: '它' };
      }
    },
  },
  methods: {
    ...mapActions({ setUser: 'setShowingUser' }),
    // 更新了用户头像
    resetAvatar(url) {
      this.setUser(Object.assign({}, this.user, { avatar: url }));
    },
    // 关注了用户
    handleAttention(user) {
      this.setUser(user);
    },
  },
  watch: {
    // 动态设置展开高度
    profileExpand(val) {
      if (val) {
        this.$nextTick(() => {
          const height = this.$refs['detail-box'].clientHeight;
          if (height > 51) this.$refs['content-box'].style.height = `${height}px`;
        });
      }
    },
  },
};
</script>

<style lang="scss">
.ll-icon {
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 10px;
  background-color: #eee;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}
.ll-icon--blue {
  border: #d9ecff;
  background-color: #ecf5ff;
}
</style>
